import Icon from '@/components/Icon'
import { useInitState } from '@/hooks/useInitState'
import { getUserProfile } from '@/store/actions/profile'
import { NavBar, Input } from 'antd-mobile'
import { useEffect, useRef, useState } from 'react'
import { useHistory } from 'react-router-dom'
import styles from './index.module.scss'
import io, { Socket } from 'socket.io-client'
import { getToken } from '@/utils/token'

type Message = {
  type: 'robot' | 'user'
  text: string
}

const Chat = () => {
  const history = useHistory()

  const userProfile = useInitState(getUserProfile).profile.userProfile

  // 创建一个消息列表的状态
  const [list, setList] = useState<Message[]>([
    { type: 'robot', text: '亲爱的用户你好,小智同学为你服务!!' },
    { type: 'user', text: '你好呀!!' },
  ])

  const [val, setVal] = useState('')

  const socketRef = useRef<Socket | null>(null)

  const listRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    // 组件一加载, 建立websocket连接(希望客户端和服务端 双向通信)
    socketRef.current = io('http://toutiao.itheima.net', {
      transports: ['websocket'],
      query: {
        token: getToken().token,
      },
    })

    // 监听连接是否成功
    socketRef.current.on('connect', () => {
      // 连接成功后 就会触发这个函数
      console.log('连接成功了...')

      // 模拟一下
      // socket.emit('message', {
      //   msg: '你今天怎么样!!',
      //   timestamp: Date.now(),
      // })

      // setList([
      //   ...list,
      //   {
      //     type: 'robot',
      //     text: '小智连接成功!!',
      //   },
      // ])

      setList((list) => {
        return [
          ...list,
          {
            type: 'robot',
            text: '小智连接成功',
          },
        ]
      })
    })

    // 监听连接断开
    socketRef.current.on('disconnect', () => {
      console.log('连接断开了...')
    })

    // 发送与接收消息的事件(event) 均为message!!!
    // 浏览器 发消息 给服务器??? socket.emit('message', xxxx)
    // 服务器发过来的消息 我怎么接收??? socket.on('message', (data) => {})

    socketRef.current.on('message', (data) => {
      // console.log('后端有消息来了', data)
      setList((list) => {
        return [
          ...list,
          {
            type: 'robot',
            text: data.msg,
          },
        ]
      })
    })

    return () => {
      // 组件卸载时 关闭socket连接
      socketRef.current!.close()
    }
  }, [])

  useEffect(() => {
    // 当消息列表变化时 就需要滚动到最底部
    const div = listRef.current!
    // 设置滚动距离为 内容实际高度 - 本身高度
    div.scrollTop = div.scrollHeight - div.offsetHeight
  }, [list])

  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar className="fixed-header" onBack={() => history.go(-1)}>
        小智同学
      </NavBar>

      {/* 聊天记录列表 */}
      <div className="chat-list" ref={listRef}>
        {list.map((item, index) => {
          return item.type === 'robot' ? (
            <div className="chat-item" key={index}>
              <Icon name="iconbtn_xiaozhitongxue" />
              <div className="message">{item.text}</div>
            </div>
          ) : (
            <div className="chat-item user" key={index}>
              <img src={userProfile.photo} alt="" />
              <div className="message">{item.text}</div>
            </div>
          )
        })}

        {/* 机器人的消息 */}

        {/* 用户的消息 */}
      </div>

      {/* 底部消息输入框 */}
      <div className="input-footer">
        <Input
          value={val}
          onChange={(val) => {
            setVal(val)
          }}
          onKeyUp={(e) => {
            // console.log(1111)
            // console.log(e.key, e.keyCode)
            if (e.key === 'Enter' && val.trim()) {
              // console.log(val)
              // socket
              socketRef.current?.emit('message', {
                msg: val,
                timestamp: Date.now(),
              })
              // 更新用户消息到消息列表中
              setList((list) => {
                return [
                  ...list,
                  {
                    type: 'user',
                    text: val,
                  },
                ]
              })
              setVal('')
            }
          }}
          className="no-border"
          placeholder="请描述您的问题"
        />
        {/* <Icon name="iconbianji" /> */}
      </div>
    </div>
  )
}

export default Chat
